<template>
	<view class="recordlist">
		<image class="signin_bk_img" :src="onlinePic+'signin/bg.png'" mode="widthFix"></image>
		<view class="signin_pages_box">
			<view class="display_flex c-white mt-30">
				<image class="oil1_img" :src="onlinePic+'signin/oil1.png'" mode="aspectFill">
				</image>
				<view class="ml-5">
					<view class="f-14">当前总收益</view>
					<view class="f-18 f-w">{{user_integral}}L油</view>
				</view>
				<!-- <uni-icons class="info_icons" type="info" size="30" color="#FFFFFF"></uni-icons> -->
			</view>
			<view class="recordlist_box">
				<view class="groupactivelist_top_block">
					<view class="groupauditlist_tabs">
						<view @click="changeTabs(1)"
							:class="pagetype==1?'groupauditlist_tabs_cell tabs_on text-r':'groupauditlist_tabs_cell text-r'">
							当前明细
						</view>
						<view @click="changeTabs(2)"
							:class="pagetype==2?'groupauditlist_tabs_cell tabs_on text-l':'groupauditlist_tabs_cell text-l'">
							礼品记录
						</view>
					</view>
				</view>
				<view class="recordlist_cell_box">
					<view v-if="pagetype==1">
						<view v-for="item in list" :key="item.id" class="recordlist_cell">
							<image class="task_cell_icon" :src="item.pic?picUrl+item.pic:''"></image>
							<view class="ml-10 flex-1">
								<view class="f-13">{{item.name?item.name:''}}</view>
								<view class="f-10 c-999999">{{item.create_time}}</view>
							</view>
							<view class="task_status_ok">{{item.integral_text}}</view>
						</view>
						<view class="page_bottom_loading" :style="'padding-bottom:'+pdbottom+'rpx;'">{{loadingTitle}}
						</view>
					</view>
					<view v-if="pagetype==2">
						<view v-for="(item,index) in listc" :key="item.id" class="gift_cell">
							<image class="gift_cell_bk" :src="onlinePic+'signin/gift_bk.png'" mode="widthFix"></image>
							<view v-if="item.status==1" class="gift_status_def">已使用</view>
							<view v-else class="gift_status">未使用</view>
							<view class="gift_cell_content_box">
								<image class="gift_img" :src="picUrl+item.prize_pic">
								</image>
								<view class="gift_text_box">
									<view class="f-14">{{item.prize_title}}</view>
									<view class="f-10 c-999999">获得时间：{{item.create_time}}</view>
									<!-- <view class="f-10 c-999999">逾期不可使用</view> -->
								</view>
							</view>
							<view v-if="item.status==1" class="gift_use_def_btn">立即使用</view>
							<view v-else @click="useMyGift(item.id,index)" class="gift_use_btn">立即使用</view>
						</view>

						<view class="page_bottom_loading" :style="'padding-bottom:'+pdbottom+'rpx;'">{{loadingTitlec}}
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		getIntegralRecordList,
		getSigninPrizeList,
		getSigninInfo,
		useMyGift
	} from '@/api/motortime.js';
	let app = getApp()
	export default {
		data() {
			return {
				pagetype: 1,
				params: {
					page: 1,
					size: 20
				},
				list: [],
				current_page: '',
				last_page: '',
				total: 0,
				loadingTitle: '',
				paramsc: {
					page: 1,
					size: 20
				},
				listc: [],
				current_pagec: '',
				last_pagec: '',
				totalc: 0,
				loadingTitlec: '',
				user_integral: '',
				picUrl: app.globalData.picUrl,
				onlinePic: app.globalData.onlinePic,
				pdbottom: uni.getSystemInfoSync().safeAreaInsets.bottom ? uni.getSystemInfoSync().safeAreaInsets.bottom :
					30,
			};
		},
		onShow() {

		},
		onLoad() {
			this.getIntegralRecordList()
			this.getSigninInfo()
			var params = {
				event_code: '收益记录',
				path: 'pages/signin/recordlist',
				event_id: '',
				title: '',
				source_page: '',
				value: '',
			}
			app.BurialPoint(params)
		},
		methods: {
			getSigninInfo() {
				getSigninInfo({
					user_id: uni.getStorageSync('userinfo') ? uni.getStorageSync('userinfo').user_id : 0
				}).then(res => {
					if (res.state == 1) {
						this.user_integral = res.data.info.user_integral
					} else {
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
			},
			changeTabs(type) {
				this.pagetype = type
				if (type == 1) {
					if (this.list.length == 0) {
						this.getIntegralRecordList()
					}
					this.pagetype = type
				} else if (type == 2) {
					if (this.listc.length == 0) {
						this.getSigninPrizeList()
					}
					this.pagetype = type
				}
			},
			getIntegralRecordList() {
				getIntegralRecordList(this.params).then(res => {
					if (res.state == 1) {
						this.list = [...this.list, ...res.data.data]
						this.current_page = res.data.current_page
						this.last_page = res.data.last_page
						this.total = res.data.total
						if (this.list.length == 0) {
							this.loadingTitle = "- 暂无更多 -"
						}
					} else {
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
			},
			getSigninPrizeList() {
				getSigninPrizeList(this.paramsc).then(res => {
					if (res.state == 1) {
						this.listc = [...this.listc, ...res.data.data]
						this.current_pagec = res.data.current_page
						this.last_pagec = res.data.last_page
						this.totalc = res.data.total
						if (this.listc.length == 0) {
							this.loadingTitlec = "- 暂无更多 -"
						}
					} else {
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
			},
			useMyGift(id, index) {
				useMyGift({
					id: id
				}).then(res => {
					if (res.state == 1) {
						this.listc[index].status = 1
						uni.showToast({
							title: '操作成功',
							mask: true,
							icon: 'success',
							duration: 1500
						})
					} else {
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
				var params = {
					event_code: '收益记录',
					path: 'pages/signin/recordlist',
					event_id: id,
					title: this.listc[index].prize_title,
					source_page: '收益记录-立即使用',
					value: '',
				}
				app.BurialPoint(params)
			}
		},
		onPullDownRefresh() {
			if (this.pagetype == 1) {
				this.params.page = 1
				this.list = []
				this.getIntegralRecordList()
			} else if (this.pagetype == 2) {
				this.paramsc.page = 1
				this.listc = []
				this.getSigninPrizeList()
			}
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			if (this.pagetype == 1) {
				if (this.current_page < this.last_page) {
					this.showLoading = true
					this.params.page = this.params.page + 1
					this.getIntegralRecordList()
				} else {
					this.showLoading = false
					if (this.list.length > 0) {
						this.loadingTitle = "- 已经到底了 -"
					} else {
						this.loadingTitle = "- 暂无更多 -"
					}
				}
			} else if (this.pagetype == 2) {
				if (this.current_pagec < this.last_pagec) {
					this.paramsc.page = this.paramsc.page + 1
					this.getSigninPrizeList()
				} else {
					if (this.listc.length > 0) {
						this.loadingTitlec = "- 已经到底了 -"
					} else {
						this.loadingTitlec = "- 暂无更多 -"
					}
				}
			}
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F7F7;
	}

	.recordlist {
		position: relative;

		.signin_bk_img {
			width: 100%;
		}

		.signin_pages_box {
			top: 0;
			left: 0;
			right: 0;
			position: absolute;
			z-index: 1;
			padding: 0 30rpx;

			.oil1_img {
				width: 107rpx;
				height: 135rpx;
				margin-left: 30rpx;
			}

			.info_icons {
				position: absolute;
				right: 30rpx;
				top: 40rpx;
				z-index: 2;
			}

			.recordlist_box {
				padding: 30rpx;
				margin: 50rpx 0;
				border-radius: 8rpx;
				background-color: #ffffff;

				.groupactivelist_top_block {

					.groupauditlist_tabs {
						font-size: 32rpx;
						display: flex;
						align-items: center;
						justify-content: space-around;
						border-radius: 8rpx;

						.groupauditlist_tabs_cell {
							width: 50%;
							padding: 0 30rpx;
							border-right: 3rpx solid #000000;
						}

						.groupauditlist_tabs_cell:last-child {
							border-right: 0;
						}

						.tabs_on {
							color: #00A0DC;
						}
					}
				}

				.recordlist_cell_box {
					margin-top: 10rpx;

					.recordlist_cell {
						display: flex;
						align-items: center;
						padding: 30rpx 0;
						border-bottom: 1rpx solid #F1F1F1;

						.task_cell_icon {
							width: 75rpx;
							height: 75rpx;
							vertical-align: middle;
						}

						.task_status_ok {
							color: #00A0DC;
							font-size: 20rpx;
							padding: 3rpx 15rpx;
							border-radius: 4rpx;
							background-color: #E5F5FB;
							border: 1rpx solid #ADE9FF;
						}

					}

					.gift_cell {
						position: relative;
						margin-top: 40rpx;

						.gift_cell_bk {
							width: 100%;
						}

						.gift_status {
							top: 0;
							right: 0;
							z-index: 1;
							position: absolute;
							color: #ffffff;
							font-size: 18rpx;
							padding: 4rpx 6rpx;
							border-top-right-radius: 8rpx;
							background-color: #E94E4E;
						}

						.gift_status_def {
							top: 0;
							right: 0;
							z-index: 1;
							position: absolute;
							color: #ffffff;
							font-size: 18rpx;
							padding: 4rpx 6rpx;
							border-top-right-radius: 8rpx;
							background-color: #C5C5C5;
						}

						.gift_cell_content_box {
							top: 0;
							left: 0;
							right: 0;
							bottom: 0;
							z-index: 1;
							position: absolute;
							display: flex;
							align-items: center;

							.gift_img {
								width: 135rpx;
								height: 135rpx;
								margin-left: 40rpx;
							}

							.gift_text_box {
								margin-left: 60rpx;
								margin-top: -50rpx;
							}


						}

						.gift_use_btn {
							position: absolute;
							right: 30rpx;
							bottom: 30rpx;
							color: #ffffff;
							font-size: 24rpx;
							width: 150rpx;
							height: 45rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							border-radius: 30rpx;
							background-color: #00A0DC;
							z-index: 1;
						}

						.gift_use_def_btn {
							position: absolute;
							right: 30rpx;
							bottom: 30rpx;
							color: #ffffff;
							font-size: 24rpx;
							width: 150rpx;
							height: 45rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							border-radius: 30rpx;
							background-color: #C5C5C5;
							z-index: 1;
						}

					}
				}
			}
		}


	}
</style>